const alertApi = require('../../utils/alert.js')

class Canvas {
  set = {offset:1, gap: 20, lineSize: 8 , speed : 1.5}
  color = ['#0096c3', 'red', 'green', 'black']
  constructor (info, canvasNode) {
    var that = this
    this.info = JSON.parse(JSON.stringify(info));
    this.s = info.grid.size
    this.info.img.bg = canvasNode.createImage()
    this.info.img.bg.src = this.info.URL.bg
    this.info.img.bg.onload = () => {
      that.info.img._bg = that.info.img.bg;
    }
    this.info.img.base = canvasNode.createImage()
    this.info.img.base.src =  this.info.URL.base
    this.info.img.base.onload = () => {
      that.info.img._base = that.info.img.base;
    }
    this.info.img.icon = canvasNode.createImage()
    this.info.img.icon.src = this.info.URL.icon
    this.info.img.icon.onload = () => {
      that.info.img._icon = that.info.img.icon;
    }
    this.info.img.end = canvasNode.createImage()
    this.info.img.end.src = this.info.URL.end
    this.info.img.end.onload = () => {
      that.info.img._end = that.info.img.end;
    }
  }

  drawBackGround (ctx) {
    var info = this.info
    if(info.img._bg) ctx.drawImage(info.img._bg, 0, 0, info.de.width, info.de.width * info.bgpic.ratio)
    
    if(info.img._base){
      ctx.drawImage(info.img._base, info.de.width*0.9, info.bgpic.ratio*info.de.width*0.94,30,30)
      ctx.drawImage(info.img._base, info.de.width*0.9, info.bgpic.ratio*info.de.width*0.04,30,30)
      ctx.drawImage(info.img._base, info.de.width*0.02, info.bgpic.ratio*info.de.width*0.60,30,30)
    }

    ctx.beginPath()
    ctx.fillStyle = 'red'
    ctx.globalAlpha = 0.5
    for(var area of info.OOLArea){
      ctx.rect(area.x1, area.y1, area.x2 - area.x1, area.y2 - area.y1)
    }
    ctx.fill()
    ctx.globalAlpha = 1
    ctx.closePath()

    if (0) {
      ctx.beginPath()
      ctx.strokeStyle = 'black'
      ctx.lineWidth = 0.5
      for(var i = 0; i < this.info.grid.row; i++){
        for(var j = 0; j < this.info.grid.col; j ++ ){
          if(this.info.map2d[i][j] == 1)
            ctx.rect(j* this.s, i* this.s,  this.s,  this.s)
        }
      }
      ctx.stroke()
      ctx.closePath()
    }
  }

  drawLocation (ctx, canvasCoord, ID) {
    ctx.beginPath()
    ctx.lineWidth = 2.5
    ctx.strokeStyle = "#d3d3d3"
    for(var i in canvasCoord){
      ctx.beginPath()
      ctx.fillStyle = this.color[i % this.color.length]
      ctx.arc(canvasCoord[i].x - 5, canvasCoord[i].y - 5, 10, 0, 2*Math.PI)
      ctx.fill()
      ctx.stroke()
    } 
  
    ctx.beginPath()
    ctx.fillStyle = 'black'
    ctx.font = "bold 20px sans-serif"
    for(var i in canvasCoord){
      if(i == 0) ctx.fillText("主设备:"+ ID[i] , canvasCoord[i].x + 10, canvasCoord[i].y)
      else ctx.fillText("从设备:" +  ID[i], canvasCoord[i].x + 10, canvasCoord[i].y)
    } 
  }
  
  drawRoute (ctx, route) {
    var offset = this.set.offset, gap = this.set.gap, lineSize = this.set.lineSize
    this.set.offset = (this.set.offset + this.set.speed) % gap
    if(route.length < 2) return

    ctx.beginPath()
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.strokeStyle = "#45ff0d"
    ctx.lineWidth = lineSize
    ctx.moveTo(route[0].x,route[0].y)
    for(var i = 1; i < route.length; i ++ ){
      ctx.lineTo(route[i].x,route[i].y)
    }
    ctx.stroke()
    ctx.closePath()

    /* 绘制线条上箭头 */
    ctx.beginPath()
    for(var i = 0; i < route.length - 1; i ++ ){
      ctx.translate(route[i].x, route[i].y);
      var angle = this.computingAngle(route[i].x, route[i].y,route[i+1].x, route[i+1].y, false)
      ctx.rotate(angle);
      for(var len = offset;
         len < Math.sqrt(Math.pow(route[i+1].x -  route[i].x,2) + Math.pow(route[i+1].y -  route[i].y, 2)) - gap / 2 + 10;
         len += gap){
          ctx.drawImage(this.info.img._icon, len, -lineSize / 2, lineSize, lineSize)
      }
      ctx.rotate(-angle);
      ctx.translate(-route[i].x, -route[i].y);
    }
    ctx.closePath()

    /* 绘制终点 */
    var i =   route.length - 1 
    ctx.drawImage(this.info.img._end, route[i].x-18, route[i].y-40, 34, 40)
  }

  toCanvasRoute(canvasRoute) {
    var route = []
    for(var i in canvasRoute){
      var r = {}
      r.x = canvasRoute[i].x * this.s
      r.y = canvasRoute[i].y * this.s
      route.push(r)
    }
    return route
  }

  computingAngle (SX, SY, EX, EY, bool) {
    if (bool) {
      SY = -SY;
      EY = -EY;
    }
    if (EX - SX == 0) {
        return EY - SY > 0 ? Math.PI / 2 : -Math.PI / 2;
    }
    let angle = Math.atan((EY - SY) / (EX - SX));
    if (EX - SX > 0) {
        return angle;
    } else {
        return angle + Math.PI;
    }
  }
}

module.exports={
  Canvas
}